<template>
    <div class="container">
        <h2>
            <a href="https://v4-11-2.vueuse.org/" target="_block"
                >Vueuse 工具函数</a
            >
        </h2>
        <div class="demo-item">
            <h3>useMouse</h3>
            <div>
                鼠标位置: <button>x:{{ x }}</button> <button>y:{{ y }}</button>
            </div>
        </div>
        <div class="demo-item">
            <h3>onClickOutside</h3>
            <div ref="outsideRef" class="out-side">点击此区域外</div>
        </div>
        <div class="demo-item">
            <h3>useVirtualList</h3>
            <VirtualList></VirtualList>
        </div>
        <div class="demo-item">
            <h3>templateRef</h3>
            <div ref="tempRef">使用templateRef获取dom无需将变量导出</div>
        </div>
        <div class="demo-item">
            <h3>useVModel</h3>
			<p>{{ inputVal }}</p>
            <Child v-model="inputVal"></Child>
        </div>
    </div>
</template>

<script setup>
    import VirtualList from "./VirtualList.vue";
    import { onMounted, ref } from "vue";
    import { useMouse, onClickOutside, templateRef } from "@vueuse/core";
    import Child from "./Child.vue";

    const outsideRef = ref(null);
    const inputVal = ref("");
    const customRef = templateRef("tempRef");

    const { x, y } = useMouse();
    onClickOutside(outsideRef, (event) => {
        console.log("点击了区域外部：", event);
    });
    onMounted(() => {
        console.log(`output->customRef`, customRef.value);
    });
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        .demo-item {
            padding: 10px;
            border: 1px solid #cdcdcd;
            border-radius: 4px;
        }
        .out-side {
            width: fit-content;
            padding: 4px 8px;
            border-radius: 4px;
            background-color: antiquewhite;
            cursor: pointer;
        }
    }
</style>
